/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/*  */


/* 颜色变量 */
$activeColor:rgba(238, 92, 43, 1);
$grayBgc:rgba(248, 248, 248, 1);


$btnGrayBg:rgba(242, 242, 242, 1);   // 默认背景灰色
$btnActiveBg:rgba(205, 227, 255, 1); //激活后的背景颜色

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;

/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;

/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;

/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;



// 购物车
.shop_car{
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:888;
  background:rgba(0,0,0,0.7);
}
.shop_car {
  .content{
    position:fixed;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    z-index:999;
    bottom:0;
    left:0;
    height: 80vh;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .sc_header{
      position: relative;
      border-bottom: 1px solid #ddd;
      height:80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
      .delete_icon_wrap{
        position:absolute;
        right:4px;
        top:2px;
        width:60rpx;
        height:60rpx;
        border-radius: 50%;
        border:1px solid #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .sc_body{
      flex:1;
      height: calc(80vh - 280rpx);
    }
    .sc_footer{
      height: 100rpx;
     text-align: center;
     padding-top:15rpx;
    }
  }

}
/* 主背景色 */
.mainBoxBG{
  background:#F0F0F0
}

.btn_base{
  border-radius: 35rpx;
  margin: 0;
}

// 确定按钮---
.primary_btn {
  background-color: $activeColor;
  border-radius: 35rpx;
  margin: 0;
}


// 取消按钮---
.cancel_btn{
  background-color: $uni-text-color;
  border-radius: 35rpx;
  margin: 0;
}

// 查看按钮
.detail_btn{
  background-color: $uni-color-primary;
}


// 修改按钮
.update_btn{
  background-color: $uni-color-success;
}


.btn_margin{
  margin:0 15rpx;
}

.flex{
  display: flex;
}
.flex-row{
  flex-direction: row;
}

.col-1{
  width: 10%;
}
.col-2{
  width: 20%;
}
.col-3{
  width: 30%;
}
.col-4{
  width: 40%;
}
.col-5{
  width: 50%;
}
.col-6{
  width: 60%;
}
.col-7{
  width: 70%;
}
.col-8{
  width: 80%;
}
.col-9{
  width: 90%;
}
.p-y-30{
  padding-top: 30rpx;
}
.list-row{
  width: 90%;
  border-radius: 20rpx;
  padding: 10rpx;
  background-color: #ffffff;
  margin: 0 5% 15rpx 5%;
}

.line-division{
  width: 100%;
  border-bottom: rgba(200,200,200,0.5) 1px solid;
}

.goodsImage{
  width: 200rpx;
  height: 200rpx;
}

.title-font{
  color: #e6e6e6;
}

.font-large{
  font-size: 36rpx !important;
}
.title-row{
  margin-bottom: 15rpx;
}
.auto{
  margin: auto;
}
.floatLeft{
  float: left;
}
.list-card{
  border-radius: 20rpx;
  height: 300rpx;
}

.card-title{
  padding-left: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}
.break{
  word-wrap: break-word;
}
.bold{
  font-weight: bold;
}
.lighter{
  font-weight: lighter;
}
.relative{
  position: relative;
}
.bottom{
  position: absolute;
  bottom: 0;
}
.j-content{
  justify-content : center;
}
.a-item{
  align-items: center;
}
.wrap{
  flex-wrap: wrap;
}
.flex-column{
  flex-direction: column;
}
.btn-font{
  color: #ffffff;
  font-size: 36rpx;
}
.j-content-between{
  justify-content: space-between;
}
.j-content-end{
  justify-content: flex-end;
}
.font-ash{
  color: rgb(200,200,200)
}
.flex-warp{
  flex-wrap: wrap;
}
.mg-y-10{
  margin: 10rpx 0;
}
.fl1{
  flex: 1;
}
.fl2{
  flex: 2;
}
.fl3{
  flex: 3;
}
.fl4{
   flex: 4;
 }
.fl5{
    flex: 5;
  }
.fl6{
     flex: 6;
   }
.fl7{
  flex: 7;
}.fl8{
   flex: 8;
 }
.fl9{
    flex: 9;
  }


.flex-reverse{
  flex-direction: row-reverse;
}
.borderTemp{
  border: rgb(200,200,200) solid 1px;
  border-radius: 20rpx;
}
.red{
  color: red;
}
.orange{
  color: orange;
}
.flex-warp{
  flex-wrap: wrap;
}
.shoppingCart{
  background: white;
  width: 80rpx;
  height: 80rpx;
  border-radius: 80rpx;
  position: fixed;
  bottom: 80rpx;
  right: 50rpx;
  box-shadow: 0 0 5px 3px #DEE0E2;
  image{
    width: 50rpx;
    height: 50rpx;
  }
  .redDot{
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25rpx;
    min-width: 25rpx;
    height: 25rpx;
    color: white;
    font-size: 25rpx;
    position: absolute;
    right: 5rpx;
    top: 13rpx;
  }
}
.mask{
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.7);
  position: absolute;
}
.box{
  border-radius: 20rpx;
  width: 100%;
  background: #ffffff;
  padding: 30rpx;
  margin-bottom: 30rpx;
}
.grey{
  color: rgb(206,206,206);
}
.gray{
  color: gray;
}
.zzz .uni-list-item{
  background: #f1f1f1 !important;
}
